<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件代理/事件委托</title>
    <script>
        window.onload=function(){
            // 获取元素节点
            var list=document.getElementById('list');
            var one=document.getElementById('one');
            var two=document.getElementById('two');
            var three=document.getElementById('three');
            // function handler1(){
            //     console.log(this.id);
            //     this.innerHTML='我是第一个孩子'
            // };
            // function handler2(){
            //     console.log(this.id);
            //     this.innerHTML='我是第二个孩子'
            // };
            // function handler3(){
            //     console.log(this.id);
            //     this.innerHTML='我是第三个孩子'
            // };
            // one.addEventListener('click',handler1,false);
            // two.addEventListener('click',handler2,false);
            // three.addEventListener('click',handler3,false);
            // 事件代理 本应该绑定给子元素的事件绑定给父元素
            list.onclick=function(event){
            //    console.log(event);
               var target=event.target;
               switch(target.id){
                    case 'one':
                       target.innerHTML='我是第一个孩子';
                       break;
                    case 'two':
                       target.innerHTML='我是第二个孩子';
                       break;
                    case 'three':
                       target.innerHTML='我是第三个孩子';
                       break;       
               }
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li id="one">one</li>
        <li id="two">two</li>
        <li id="three">three</li>
    </ul>
</body>
</html>